<style>
    .level1 { margin-left:0px;}
    .level2 {margin-left:20px; display: none;}
    .level3 {margin-left:40px; display: none;}
</style>
<div class="tree"></div>


<script src="http://unpkg.zhimg.com/jquery"></script>
<script src="./tree.js"></script> 
<script>  
    let arr = [
        {id:1, name: '零食', pid: 0, level: 1},
        {id:2, name: '生活用品', pid: 0, level: 1},
        {id:3, name: '攻城狮', pid: 0, level: 1},

        {id:4, name: '方便面', pid: 1, level: 2},
        {id:5, name: '汽水', pid: 1, level: 2},
        {id:6, name: '薯条', pid: 1, level: 2},
        
        {id:7, name: '床单', pid: 2, level: 2},
        {id:8, name: '枕头', pid: 2, level: 2},
        {id:9, name: '洗发水', pid: 2, level: 2},

        {id:10, name: 'WEB大前端', pid: 3, level: 2},
        {id:11, name: 'JAVA', pid: 3, level: 2},
        {id:12, name: 'PYTHON', pid: 3, level: 2},
        
        {id:13, name: 'JS变量', pid: 10, level: 3},
        {id:14, name: 'JS判断', pid: 10, level: 3},
        {id:15, name: 'JS循环', pid: 10, level: 3},
        
        {id:16, name: 'JAVA变量', pid: 11, level: 3},
        {id:17, name: 'JAVA判断', pid: 11, level: 3},
        {id:18, name: 'JAVA循环', pid: 11, level: 3},
    ]
</script>


<script>
    //获取树形数据
    let datas =  getTree(arr, 0)
    console.log(datas)
    //遍历数据，追加到页面
    //一级
    $.each(datas,(i,item)=>{
        $('.tree').append(`<p class="level level1" id="${item.id}" pid="0">
                                <span>${item.children && item.children.length>0 ? '+' : '×'}</span>
                                ${item.name}
                            </p>`
        )
        //二级
        if(item.children && item.children.length>0){
            //遍历子数据
            $.each(item.children,(i1,item1)=>{
                $('.tree').append(`<p class="level level2" id="${item1.id}" pid="${item.id}">
                                    <span>${item1.children && item1.children.length>0 ? '+' : '×'}</span>
                                    ${item1.name}
                                    </p>`
                )
                //三级
                if(item1.children && item1.children.length>0){
                    //遍历子数据
                    $.each(item1.children,(i2,item2)=>{
                        $('.tree').append(`<p class="level level3" id="${item2.id}" pid="${item1.id}">
                                            <span>${item2.children && item2.children.length>0 ? '+' : '×'}</span>
                                            ${item2.name}
                                            </p>`
                        )
                    })
                }
            })
        }
    })

</script>
<script>
    $('p').click(function(){
        let fuhao = $(this).find('span').text()
        if(fuhao == '+'){
            let id = $(this).attr('id')
            $(`p[pid=${id}]`).show()
            $(this).find('span').text('-')
        }
        else if(fuhao == '-'){
            let id = $(this).attr('id')
            $(`p[pid=${id}]`).hide()
            $(this).find('span').text('+')
        }
        else{
            $('p').click(null)
        }
    })
</script>